<template name="neoceansoft-keyboard">

	<view :style="{'height':popupHeight}" class="numView">

		<view style="display: flex;">


			<view :style="{'width':numWidht}">

				<view style="width: 100%; height: 2rpx;background-color: #efefef;" />
				<view style="display: flex;">
					<view v-for="(item,index) in num1" :style="{'height':numBtnHeight,'width':numBtnWidth}"
						class="numLayout">
						<view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
						<button plain="true" hover-class="numClickCss"
							:style="{'height':numBtnHeight,'width':numBtnWidth}" class="numBtn" @click="btnClick(item)">
							{{item}}
						</button>
						<view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
					</view>
				</view>


				<view style="width: 100%; height: 2rpx;background-color: #efefef;" />
				<view style="display: flex;">
					<view v-for="(item,index) in num2" :style="{'height':numBtnHeight,'width':numBtnWidth}"
						class="numLayout">
						<view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
						<button plain="true" hover-class="numClickCss"
							:style="{'height':numBtnHeight,'width':numBtnWidth}" class="numBtn" @click="btnClick(item)">
							{{item}}
						</button>
						<view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
					</view>
				</view>


				<view style="width: 100%; height: 2rpx;background-color: #efefef;" />
				<view style="display: flex;">
					<view v-for="(item,index) in num3" :style="{'height':numBtnHeight,'width':numBtnWidth}"
						class="numLayout">
						<view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
						<button plain="true" hover-class="numClickCss"
							:style="{'height':numBtnHeight,'width':numBtnWidth}" class="numBtn" @click="btnClick(item)">
							{{item}}
						</button>
						<view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
					</view>
				</view>


				<view style="width: 100%; height: 2rpx;background-color: #efefef;" />
				<view style="display: flex;">
					<view v-for="(item,index) in num4" :style="{'height':numBtnHeight,'width':numBtnWidth}"
						class="numLayout">
						<view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
						<button plain="true" v-if="index==2" hover-class="numClickCss"
							:style="{'height':numBtnHeight,'width':numBtnWidth}" class="numBtn"
							@click="btnClick(item.type)">
							<view class="iconfont icon-deletenumber"></view>

						</button>
						<button v-else plain="true" :hover-class="index==0&&password? '':'numClickCss'" 
							:style="{'height':numBtnHeight,'width':numBtnWidth}" class="numBtn"
							@click="btnClick(item.type)">
							{{item.name}}
						</button>
						<view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
					</view>
				</view>
			</view>
			<view :style="{'height':popupHeight}" class="boderSy"></view>




			<view v-if="isShowPay" :style="{'width':opBtnWidth,'height':popupHeight}">
				<view :hair-line="false" :style="{'height':opBtnHeight1,'width':opBtnWidth}" class="opBtn1"
					@click="shouyin(0)">
					扫码<br />收银
				</view>
				<view :hair-line="false" :style="{'height':opBtnHeight2,'width':opBtnWidth}" class="opBtn2"
					@click="shouyin(1)">
					现金<br />收银
				</view>


			</view>

			<view v-if="isShowPay" :style="{'width':opBtnWidth,'height':popupHeight}">
				<view :hair-line="false" :style="{'height':opBtnHeight1,'width':opBtnWidth}" class="opBtn1x">
					扫码<br />收银
				</view>
				<view :hair-line="false" :style="{'height':opBtnHeight2,'width':opBtnWidth}" class="opBtn2x">
					现金<br />收银
				</view>


			</view>

		</view>


	</view>





</template>

<script>
	export default {
		data() {
			return {
				numBtnWidth: '',
				numBtnHeight: '',
				popupHeight: '',
				numWidht: '',
				opBtnWidth: '',
				opBtnHeight1: '',
				opBtnHeight2: '',
				nums: [],
				isShowPay: false,
				bl: 0.45,
				num1: [1, 2, 3],
				num2: [4, 5, 6],
				num3: [7, 8, 9],
				num4: [{
					name: '.',
					type: -1
				}, {
					name: '0',
					type: 0
				}, {
					name: '删除',
					type: -2
				}],

			}
		},
		props: {
			// 键盘属性：true 密码键盘 false 数字键盘
			password: {
				type: Boolean,
				default: false
			}
		},


		created() {


			var that = this
			uni.getSystemInfo({
				success(res) {
					console.log("页面信息：" + JSON.stringify(res))

					var width = (res.screenWidth / 3) * 3
					var height = width / 3 * that.bl
					that.opBtnWidth = (res.screenWidth / 4) * 1 + 'px'
					// that.opBtnHeight1 = (height * 4) * (3 / 5) + 'px'
					// that.opBtnHeight2 = (height * 4) * (2 / 5) + 'px'
					that.opBtnHeight1 = ((height * 2) + 2.5) + 'px'
					that.opBtnHeight2 = ((height * 2) + 2) + 'px'
					that.numWidht = width + 'px'
					that.numBtnWidth = width / 3 + 'px'
					that.numBtnHeight = height + 'px'
					that.popupHeight = (height * 4) + 'px'

				}
			})
			if (this.password) {
				//密码键盘，不存在小数点问题
				this.num4[0].name = ''
			}

		},
		methods: {


			// 数字点击事件回调
			btnClick(item) {
				// this.$emit('click',item)
				this.$emit('keyclick', item)
				this.inputNum(item)
			},
			// 输入处理事件回调
			inputNum(item) {
				switch (item) {
					case 0:
						if (this.nums.length == 2 && this.nums[0].name === '0') {
							//首位是零不予处理
						} else {
							this.putNum('0')
						}


						break
					case 1:
						if (this.nums.length == 2 && this.nums[0].name === '0') {
							//首位是'0'先删除后操作
							this.del()
						}
						this.putNum('1')

						break
					case 2:
						if (this.nums.length == 2 && this.nums[0].name === '0') {
							//首位是'0'先删除后操作
							this.del()
						}
						this.putNum('2')
						break
					case 3:
						if (this.nums.length == 2 && this.nums[0].name === '0') {
							//首位是'0'先删除后操作
							this.del()
						}
						this.putNum('3')
						break
					case 4:
						if (this.nums.length == 2 && this.nums[0].name === '0') {
							//首位是'0'先删除后操作
							this.del()
						}
						this.putNum('4')
						break
					case 5:
						if (this.nums.length == 2 && this.nums[0].name === '0') {
							//首位是'0'先删除后操作
							this.del()
						}
						this.putNum('5')
						break
					case 6:
						if (this.nums.length == 2 && this.nums[0].name === '0') {
							//首位是'0'先删除后操作
							this.del()
						}
						this.putNum('6')
						break
					case 7:
						if (this.nums.length == 2 && this.nums[0].name === '0') {
							//首位是'0'先删除后操作
							this.del()
						}
						this.putNum('7')
						break
					case 8:
						if (this.nums.length == 2 && this.nums[0].name === '0') {
							//首位是'0'先删除后操作
							this.del()
						}
						this.putNum('8')
						break
					case 9:
						if (this.nums.length == 2 && this.nums[0].name === '0') {
							//首位是'0'先删除后操作
							this.del()
						}
						this.putNum('9')
						break
					case -1:
						if (this.nums.length == 1) {
							//开头添加'.'
							this.putNum('0')
							this.putNum('.')

						} else {
							this.putNum('.')
						}
						break
					case -2:
						this.del()
						break

				}
			},
			putNum(data) {
				if (this.nums.length == 8) {
					return
				}
				if(data=='.'&&this.nums.length==0){
					this.nums.push('0')
					this.nums.push(data)
				}else{
					this.nums.push(data)
				}
				
				var result=this.nums.join('')
				this.$emit('result', result)
			
				




			},
			del() {
				if (this.nums.length == 0) {
					return
				}
				this.nums.splice(this.nums.length-1,1)
				var result=this.nums.join('')
				this.$emit('result', result)
				


			},




		}
	}
</script>

<style scoped>
	@font-face {
		font-family: 'iconfont';
		/* Project id 2180051 */
		src: url('https://at.alicdn.com/t/font_2180051_21huv31g6dq.woff2?t=1625469481487') format('woff2'),
			url('https://at.alicdn.com/t/font_2180051_21huv31g6dq.woff?t=1625469481487') format('woff'),
			url('https://at.alicdn.com/t/font_2180051_21huv31g6dq.ttf?t=1625469481487') format('truetype');
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 14px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.icon-deletenumber:before {
		content: "\e666";
	}




	.numView {
		/* position: fixed;
		bottom: 0rpx; */
		width: 100%;
	}

	.numBtn {
		display: flex;
		align-items: center;
		justify-content: center;
		justify-items: center;
		border-radius: 0rpx;
		border: 0rpx solid #ffffff;

	}

	.numLayout {
		display: flex;
	}

	.boderSy {
		width: 2rpx;
		background-color: #efefef;
	}

	.opBtn1 {
		background-color: #f29100;
		display: flex;
		align-items: center;
		justify-content: center;
		justify-items: center;
		align-content: center;
		color: #FFFFFF;
		font-weight: 400;
		font-size: 30rpx;
		text-align: center;


	}

	.numClickCss {
		background-color: #efefef;
		color: #FFFFFF;
	}

	.opBtn1x {
		background-color: #ffd28b;
		display: flex;
		color: #9fa0a0;
		align-items: center;
		justify-content: center;
		justify-items: center;
		align-content: center;
		font-weight: 400;
		font-size: 30rpx;
		text-align: center;

	}


	.opBtn2 {
		background-color: #0090ff;
		display: flex;
		align-items: center;
		justify-content: center;
		justify-items: center;
		align-content: center;
		color: #FFFFFF;
		font-weight: 400;
		font-size: 30rpx;
		text-align: center;

	}

	.opBtn2x {
		background-color: #7fcff4;
		display: flex;
		align-items: center;
		justify-content: center;
		justify-items: center;
		align-content: center;
		font-weight: 400;
		font-size: 30rpx;
		text-align: center;
		color: #9fa0a0;

	}

	.customStyle {
		color: 'red'
	}
</style>
